<template>
  <div class="Login">
    <el-form :model="user" :rules="rules" ref="user">
      <el-form-item prop="email" label-width="80px">
        <el-input
          maxlength="20"
          type="text"
          placeholder="email"
          autocomplete="off"
          id="email"
          v-model.trim="user.email"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" label-width="80px">
        <el-input
          maxlength="16"
          type="password"
          placeholder="password"
          autocomplete="off"
          id="password"
          v-model.trim="user.password"
        ></el-input>
      </el-form-item>
    </el-form>
    <label class="loginError">{{ Message }}</label>
    <div class="btn-login" @click="login">Login</div>
    <router-link to="/RulerLogin" class="toRulerLogin">Administrator Login</router-link>
  </div>
</template>

<script>
import axios from "axios";
import { serverAddress } from "../js/config";
import TeacherMain from "./TeacherMain.vue";

export default {
  name: "Login",
  components: {
    serverAddress,
    TeacherMain,
  },
  data() {
    return {
      Message: "",
      user: {
        email: "",
        password: "",
      },
      rules: {
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { validator: this.validateEmail, trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 10, max: 16, message: "请输入10-16位的密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    validateEmail(rule, value, callback) {
      const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      if (!value || emailRegex.test(value)) {
        callback();
      } else {
        callback(new Error("请输入有效的邮箱地址"));
      }
    },
    login() {
      this.$refs.user.validate((valid) => {
        if (valid) {
          //表单验证通过
          console.log("信息已传给后端");
          console.log(this.$route.path);
          let formObj = {
            teacherEmail: document.getElementById("email").value,
            teacherPwd: document.getElementById("password").value,
          };
          console.log(this.$route.path);
          axios({
            /* url:`${serverAddress}/login/teacher`, */
            url: "https://mock.apifox.com/m2/3662090-0-default/129572732",
            method: "POST",
            data: formObj,
          }).then((response) => {
            if (response.data.code === 1) {
              console.log(response.data);
              console.log(this.$route.path);
              if (this.$router.currentRoute.path !== "/TeacherMain") {
                this.$router.replace({
                  path: "/TeacherMain",
                });
                
                // 存储数据到sessionStorage
                sessionStorage.setItem('Email', response.data.data.teacherEmail);
                sessionStorage.setItem('Id', response.data.data.teacherId);
                sessionStorage.setItem('Head', response.data.data.teacherHead);
                sessionStorage.setItem('JWT', response.data.data.teacherJWT);
                sessionStorage.setItem('Name', response.data.data.teacherName);
                sessionStorage.setItem('Identity', '教师');
                

                /* // 从sessionStorage中获取数据
                var storedValue = sessionStorage.getItem('key');
                console.log(storedValue);  // 输出 'value'

                this.$store.commit("setEmail", response.data.data.teacherEmail);
                this.$store.commit("setId", response.data.data.teacherId);
                this.$store.commit("setHead", response.data.data.teacherHead);
                this.$store.commit("setJWT", response.data.data.teacherJWT);
                this.$store.commit("setName", response.data.data.teacherName);
                this.$store.commit("setIdentity",'教师');
                this.$nextTick(() => {
                    console.log(this.$store.state);
                });
                console.log(this.$store.state); */
              }
              if (this.$route.name !== "TeacherMain") {
                this.Message = "登录失败，请重新尝试";
              }
            } else {
              console.log(response);
              console.log(response.data);
              this.Message = "账号或密码输入错误";
              setTimeout(() => {
                this.Message = "";
              }, 5000);
            }
          });
        } else {
          this.Message = "请按要求输入信息";
          setTimeout(() => {
            this.Message = "";
          }, 5000);
        }
      });
    },
  },
};
</script>

<style scoped>
.toRulerLogin{
  font-size: 15px;
  position: relative;
  top:60px;
  left:100px ;
}
.el-form {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 20px;
  left: -25px;
}

.el-input {
  height: 40px;
  padding-top: 50px;
}

.el-form-item::v-deep .el-input__inner {
  width: 250px;
  display: block;
  border: 0;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
  background-color: rgb(240, 244, 248);
}
.el-form-item::v-deep .el-input__inner[id="email"] {
  color: #000;
  position: relative;
  left: 0px !important;
}

.message {
  font-size: 10px;
}

.btn-login {
  height: 23px;
  text-align: center;
  padding: 10px;
  border-radius: 23px;
  font-weight: 700;
  font-size: 17px;
  margin: 0 auto;
  width: 73%;
  margin-top: 310px;
  background-image: linear-gradient(to right, #8eb3f4, rgb(227, 140, 203));
  color: #fff;
}

.loginError {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-55%, 200%);
  font-size: 15px;
  color: rgb(234, 116, 116);
}
</style>